<template>
  <baidu-map class="bm-view" :scroll-wheel-zoom="true" :center="position" :zoom="10" :map-style="{style: theme ? 'midnight' : '' }">
    <bm-view style="width: 100%; height: 600px; flex: 1;background-color:#304156" />
    <bm-control style="display:flex">
      <div class="control-box">
        <div class="search-box">
          <el-input v-model="search" placeholder="请输入姓名/车牌" />
          <el-button type="primary">
            搜索
          </el-button>
        </div>
        <div class="filter-box">
          <template v-for="markerType in markerTypeList">
            <el-checkbox :key="markerType.key" v-model="markerType.isCheck">
              {{ markerType.label }}
            </el-checkbox>
          </template>
        </div>
        <el-carousel v-if="dataSource.inWarn.length" class="warn-box" indicator-position="none" direction="vertical">
          <template v-for="inWarnItem in dataSource.inWarn">
            <el-carousel-item :key="inWarnItem.id" class="wran-item">
              <i class="el-icon-message-solid" />
              <span>{{ inWarnItem.violateName }}：</span>
              <span>{{ inWarnItem.violateTargetName + ' ' + inWarnItem.desc }}</span>
            </el-carousel-item>
          </template>
        </el-carousel>
      </div>
    </bm-control>
    <!-- 路段的特殊处理 -->
    <template v-if="markerTypeList[2].isCheck">
      <template v-for="marker in dataSource.load">
        <div :key="'load=' + marker.bindId">
          <bm-polyline :path="computPaths(marker.coordinateSet)" @click="() => { handleLoadClick(marker) }" />
          <bm-marker
            :position="marker"
            :icon="{url: icon_map_load, size: {width: 46, height: 52}}"
            @click="() => { handleLoadClick(marker) }"
          />
        </div>
      </template>
    </template>
    <template v-for="markerType in markerTypeList">
      <template v-for="marker in dataSource[markerType.key]">
        <template v-if="markerType.isCheck">
          <bm-polygon
            v-if="computType(markerType.label)"
            :key="markerType.key + '=' + marker.bindId"
            :path="computPaths(marker.coordinateSet)"
          />
          <bm-marker

            :key="markerType.key + '=' + marker.bindId"
            :position="marker"
            :icon="{url: markerType.icon, size: {width: 46, height: 52}}"
            @click="() => { handleMarkerClick(marker, markerType) }"
          />
        </template>
      </template>
    </template>
  </baidu-map>
</template>

<script>
import icon_map_cam from '@/assets/work_watch/map_cam.png'
import icon_map_car from '@/assets/work_watch/map_car.png'
import icon_map_event from '@/assets/work_watch/map_event.png'
import icon_map_part from '@/assets/work_watch/map_part.png'
import icon_map_load from '@/assets/work_watch/map_load.png'
import icon_map_warn from '@/assets/work_watch/map_warn.png'
import icon_map_work from '@/assets/work_watch/map_work.png'
// ###### 输入文字会刷新的bug

export default {
  name: 'TaskWatchMap',
  props: {
    dataSource: {
      type: Object,
      default: () => ({})
    },
    theme: {
      type: Boolean,
      default: false
    }
  },

  data: function() {
    return {
      icon_map_load,
      position: { lng: 113.274464, lat: 22.930752 },
      search: '',
      markerTypeList: [
        { label: '作业人', key: 'work', icon: icon_map_work, isShow: false },
        { label: '作业车辆', key: 'car', icon: icon_map_car, isShow: false },
        { label: '部件', key: 'part', icon: icon_map_part, isShow: false },
        { label: '事件', key: 'event', icon: icon_map_event, isShow: false },
        { label: '摄像头', key: 'cameras', icon: icon_map_cam, isShow: false },
        { label: '告警', key: 'warn', icon: icon_map_warn, isShow: false }
      ]
    }
  },

  methods: {
    computType(type) {
      const marker = ['作业人', '作业车辆', '摄像头', '事件', '部件']
      const polygon = ['路段']
      if (marker.includes(type)) {
        return 'marker'
      }
      if (polygon.includes(type)) {
        return 'polygon'
      }
    },
    computPaths(json) {
      try {
        return JSON.parse(json)
      } catch (error) {
        return []
      }
    },
    handleMarkerClick(marker, markerType) {
      marker.label = markerType.label
      marker.key = markerType.key
      this.$emit('on-marker-click', marker)
    },
    handleLoadClick(marker) {
      marker.bindId = marker.id
      marker.label = '路段'
      this.$emit('on-marker-click', marker)
    }

  }
}
</script>

<style lang="scss">

// 地图相关
.control-box {
  display: flex;
  flex-wrap: wrap;
  padding-top: 20px;
  padding-left: 30px;
  &>div {
    margin-bottom: 10px;
  }
  .search-box {
    height: 60px;
    width: 440px;
    background-color: #2d3f54;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 10px;
    padding: 0 10px;

    input.el-input__inner {
      outline: none;
      border: 0;
      background-color: #2d3f54;
    }
  }
  .filter-box {
    @extend .search-box;
    width: auto;
    padding: 0 26px;

  }
}
.warn-box {
  background-color: rgba($color: #000000, $alpha: 0.4);
  color: rgba($color: #fff, $alpha: 0.85);
  width: 440px;
  height: 60px;
  overflow: hidden;

  .wran-item{
    height: 60px;
    line-height: 60px;
    padding-left: 26px;
  }
}
</style>
